<!--
  @Descripttion:：提供培训
  @Author：yejianbo
  @Date：2022年08月05日 08:53:23
-->
<template>
  <section class="iframePage" id="page">
    <HeaderCom />
    <img
      v-if="bg_img"
      :src="require(`../../assets/images/other/${bg_img}.png`)"
      class="bg_img"
      style="min-height: 700px"
    />
    <div class="container" ref="container">
      <div class="left" id="leftMenu" :class="banner ? 'left_banner' : ''">
        <div v-for="(item, index) in [list]" class="row" :key="index">
          <div class="title" :class="type == index ? 'active' : ''">
            <img src="../../assets/images/cultivate/menu.png" class="icon" />
            {{ item.title }}
          </div>
          <div v-for="(it, i) in item.list">
            <div
              v-if="it.type !== 4"
              class="row_li"
              :class="it.url == url ? 'active' : ''"
              :key="i"
              @click="openIframe2(it)"
            >
              <img
                v-if="it.icon"
                :src="
                  require(`../../assets/images/cultivate/${
                    it.url == url ? it.icon + '_active' : it.icon
                  }.png`)
                "
                class="row_li_icon"
                :class="it.icon"
              />
              {{ it.title }}
            </div>
            <div v-else-if="it.type === 4">
              <div class="row_li mb10">
                <img
                    v-if="it.icon"
                    :src="
                    require(`../../assets/images/cultivate/${
                        it.url == url ? it.icon + '_active' : it.icon
                    }.png`)
                    "
                    class="row_li_icon"
                    :class="it.icon"
                />
                {{ it.title }}
              </div>
              <div
                v-for="j in it.list"
                class="row_li left_menu_sub_title"
                :class="[it.url == url ? 'active' : '', 'mb10']"
                @click="openIframe2(j)"
              >
                <img
                  v-if="j.icon"
                  :src="
                    require(`../../assets/images/cultivate/${
                      j.url == url ? j.icon + '_active' : j.icon
                    }.png`)
                  "
                  class="row_li_icon"
                />
                {{ j.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main" :class="[bg_img ? 'main_bg' : '']" ref="main_bg">
        <div class="bannerBox" v-if="banner">
          <img
            :src="require(`../../assets/images/other/${banner}.png`)"
            class="banner"
            :style="bg_style"
          />
        </div>
        <div class="flexBox" id="pageConten">
          <div class="right">
            <img
              @load="scrollToTop"
              style="width: 100%"
              v-if="opageType === 'img'"
              :src="imgUrl"
              alt=""
              srcset=""
            />
            <iframe
              v-else
              id="iframePage"
              class="page"
              frameborder="0"
              scrolling="no"
              :src="pageUrl"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="mainFooter" id="pageFooter">
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import HeaderCom from "@/components/header/index.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
import { mapState } from "vuex";
export default {
  // 组件名称
  name: "IframePage",
  components: {
    HeaderCom,
    FooterMenu,
  },
  // 组件状态值
  data() {
    return {
      pageUrl: "",
      url: "companyProfile",
      bg_img: "",
      containerHeight: 0,
      scrollHeight: 0,
      bg_style: "",
      banner: "",
      list: [],
      menuList: [
        {
          title: "提供服务",
          list: [
            {
              title: "教育培训",
              url: "provideTraining",
              type: 1, //0:无背景图、无banner图  1：有背景图  2：有banner图 3：打开其他模块页面 4: 自定义多级菜单
              icon: "blog",
              bg_img: "provideTraining",
            },
            {
              title: "实践项目",
              url: "/productManage",
              type: 3,
              icon: "subject",
              bg_img: "",
            },
            {
              title: "研究成果",
              url: "/researchResult",
              type: 3,
              icon: "research",
              bg_img: "",
            },
            {
              title: "前沿资讯",
              url: "/newsAction",
              type: 3,
              icon: "news",
              bg_img: "",
            },
            {
              title: "规划咨询",
              type: 4,
              icon:'guihua',
              list: [
                {
                  title: "学生咨询",
                  url: "/studentConsultation",
                  type: 4,
                  icon: "student",
                  banner: "studentConsultation",
                  bg_style: "background-color: rgb(6,74,153);",
                },
                {
                  title: "企业咨询",
                  url: "/companyConsultation",
                  type: 4,
                  icon: "company",
                  banner: "companyConsultation",
                  bg_style: "background-color: rgb(6,74,153);",
                },
              ],
            },
            {
              title: "海外服务",
              url: "overseaServices",
              type: 1,
              icon: "archive",
              bg_img: "overseaService",
            },
          ],
        },
        {
          title: "关于我们",
          list: [
            {
              title: "平台简介",
              url: "companyProfile",
              type: 2,
              icon: "tags1",
              banner: "companyProfile",
              bg_style: "background-color: rgb(6,74,153);",
            },
            // {
            //   title: "平台架构",
            //   url: "/otherServices?type=2",
            //   type: 3,
            //   icon: "plaot",
            //   bg_img: "",
            // },
            {
              title: "往期活动",
              url: `/otherServices?type=1$random=${Math.random()}`,
              type: 3,
              icon: "post",
              bg_img: "",
            },
            {
              title: "法律声明",
              url: "legalNotices",
              icon: "tags2",
            },
            {
              title: "免责声明",
              url: "disclaimer",
              icon: "tags3",
            },
            {
              title: "隐私协议",
              url: "PrivacyPolicy",
              icon: "tags4",
            },
            {
              title: "服务协议",
              url: "ServicePolicy",
              icon: "tags5",
            },
          ],
        },
        {
          title: "联系我们",
          list: [
            {
              title: "帮助中心",
              url: "helpCenter",
              type: 1,
              icon: "question",
              bg_img: "helpCenter",
            },
            {
              title: "常见问题",
              url: "FAQ",
              type: 2,
              icon: "message",
              banner: "FAQ",
              bg_style: "background-color: #afc0dd;",
            },
            {
              title: "商务合作",
              url: "businessCooperations",
              icon: "business",
              type: 1,
              bg_img: "business",
            },
            {
              title: "加入我们",
              url: "joinUs",
              icon: "join",
              type: 2,
              banner: "joinUs",
              bg_style: "background-color: rgb(6,37,104);",
            },
          ],
        },
      ],
      type: 2,
      opageType: "img", // img 图片 iframe
      imgUrl: "",
    };
  },
  watch: {
    // '$route': function(oldValue,newValue){
    //   this.init()
    // }
    $route(to) {
      // 监听路由是否变化
      if (to.query.url !== this.url && to.name === "cultivate") {
        location.reload(); // 这个是刷新整个页面，会闪一下。
      }
    },
  },
  mounted() {
    this.init();
    let pageEl = document.getElementById("page");
    pageEl.addEventListener("scroll", this.menuHidden);
    window.addEventListener("message", this.dealMessage, false);
  },
  computed: {
    ...mapState(["USER_INFO", "userMobile"]),
    showBtn() {
      // 如果已经登录，不展示实习按钮
      return this.userMobile !== null && this.userMobile !== "";
    },
  },
  beforeDestory() {
    let pageEl = document.getElementById("page");
    pageEl.removeEventListener("scroll", this.menuHidden);
    window.removeEventListener("message", this.dealMessage);
  },
  // 组件方法
  methods: {
    dealMessage(e) {
      console.log(e.data);
      if (e.data === "openCase") {
        this.$router.push({ path: "/otherServices?type=3" });
      }
    },
    menuHidden() {
      let leftMenu = document.getElementById("leftMenu");
      let footEl = document.getElementById("pageFooter");
      let cb =
        window.innerHeight -
        leftMenu.getBoundingClientRect().y -
        leftMenu.getBoundingClientRect().height;
      let footElCb = window.innerHeight - footEl.getBoundingClientRect().y;
      if (footElCb >= cb) {
        leftMenu.style = "opacity: 0";
      } else {
        leftMenu.style = "opacity: 1";
      }
    },
    init() {
      let { type, url } = this.$route.query;
      this.type = Number(type) - 1;
      this.url = url;
      this.list = JSON.parse(JSON.stringify(this.menuList[this.type]));
      this.openIframe(this.list.list.filter((v) => v.url == url)[0], this.type);
    },
    menuHandle(routeName, query) {
      if (routeName) {
        this.$router.push({ name: routeName, query: { ...query } });
      } else {
        this.$message.info("模块开发中，即将上线，敬请期待");
      }
    },
    openIframe2(item) {
      if (item.type === 3 || item.type === 4) {
        if (item.url) {
          this.$router.push({ path: item.url });
        } else {
          this.$message.info("模块开发中，即将上线，敬请期待");
        }
        return;
      }
      let { url } = item;
      this.$router.push({
        name: "cultivate",
        query: { type: this.type + 1, url },
      });
    },
    openIframe(item, type) {
      this.url = item.url;
      this.type = type;
      this.bg_img = item.type == 1 ? item.bg_img : "";
      this.banner = item.type == 2 ? item.banner : "";
      this.bg_style = item.bg_style ? item.bg_style : "";
      this.opageType = "iframe";
      // let scrollHeight = document.body.scrollHeight;
      this.$nextTick(() => {
        let url = item.url;
        const base =
          process.env.NODE_ENV === "production" ||
          process.env.NODE_ENV === "local"
            ? "/"
            : "/test/";
        this.pageUrl =
          base +
          `static/${url}.html?random=${
            new Date().getTime() + Math.floor(Math.random() * 1000000)
          }`;
        document.title = item.title;
        this.setIframeHeight(item.type == 1);
        // if(scrollHeight<=1030&&item.type == 1){
        //   this.scrollHeight = scrollHeight - 80
        // }
      });
      // }
    },
    scrollToTop() {
      setTimeout(() => {
        document.getElementById("page").scrollIntoView(true);
      }, 0);
    },
    linkTo(url) {
      window.open(url, "_blank");
    },
    setIframeHeight(type) {
      let iframePage = document.getElementById("iframePage");
      iframePage.onload = () => {
        iframePage.height = 0;
        iframePage.height = iframePage.contentWindow.document.body.scrollHeight;
        this.scrollHeight = iframePage.contentWindow.document.body.scrollHeight;
        // setTimeout(() => {
        //   document.getElementById("app").scrollIntoView(true);
        // }, 100);
      };
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.iframePage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  padding-top: 80px;
  display: flex;
  flex-wrap: wrap;
  .container {
    width: 100%;
    // height: calc(100% - 352px - 80px);
    // overflow-y: scroll;
    // position: relative;
    // min-height: 700px;
  }
  .main {
    flex: 1;
    position: relative;

    .bannerBox {
      width: 100%;
      position: relative;
      height: 350px;
      overflow-x: hidden;
      .banner {
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        height: 350px;
        display: block;
        min-width: 1920px;
        // background-color: #afc0dd;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }
    }
    // .left_banner{
    //   // top: -250px !important;
    //   // left: -70px !important;
    //   left: calc(( 100% - 1200px ) / 2 - 70px) !important;
    // }
  }
  .bg_img {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
  }
  .main_bg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
    z-index: 2;
  }
  .mainFooter {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    z-index: 3;
  }
  .page {
    position: relative;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  .left {
    width: 240px;
    position: fixed;
    left: calc((100% - 1200px) / 2 - 70px);
    top: 160px;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.18);
    padding-top: 48px;
    padding-left: 20px;
    background: #fff;
    border-radius: 8px;
    transition: all 0.6s;
    opacity: 1;
    z-index: 5;
    .row {
      width: 100%;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 21px;
      // height: 52px;
      transition-duration: 0.3s;
      overflow-y: hidden;
      &:hover {
        height: auto;
        .title {
          border-bottom: 1px solid #d4d6da;
          .icon2 {
            transform: rotate(90deg);
          }
        }
      }
      .title {
        margin-bottom: 35px;
        padding-left: 40px;
        padding-bottom: 30px;
        position: relative;
        border-bottom: 1px solid #d4d6da;
        .icon {
          position: absolute;
          left: 0;
          top: 0;
          max-width: 20px;
        }
        .icon2 {
          position: absolute;
          right: 20px;
          height: 20px;
          transition-duration: 0.3s;
          top: 0;
        }
      }
      .row_li {
        width: calc(100% - 20px);
        padding-left: 44px;
        cursor: pointer;
        height: 44px;
        position: relative;
        margin-bottom: 38px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        transition-duration: 0.3s;
        .row_li_icon {
          position: absolute;
          left: 13px;
          top: 50%;
          transform: translateY(-50%);
          max-width: 20px;
          &.tags5 {
            max-width: 25px;
            left: 10px;
          }
        }
        &:hover,
        &.active {
          color: #15539a;
          background: #e1f2fd;
          font-size: 16px;
          font-weight: 600;
          // border: 1px solid #daebff;
        }
      }
      .left_menu_title {
        width: calc(100% - 20px);
        padding-left: 14px;
        cursor: normal;
        height: 44px;
        position: relative;
        margin-bottom: 18px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        transition-duration: 0.3s;
      }
      .left_menu_sub_title {
        padding-left: 60px;
        .row_li_icon {
          position: absolute;
          left: 33px;
          top: 50%;
          transform: translateY(-50%);
          max-width: 20px;
          &.tags5 {
            max-width: 25px;
            left: 10px;
          }
        }
      }
    }
  }

  .flexBox {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    padding-left: 180px;
    z-index: 2;
    // .rows{
    //   flex: 1;
    //   width: 100%;
    // }
    .right {
      width: 100%;
    }
  }
}
.mb10 {
  margin-bottom: 10px !important;
}
@media screen and (max-height: 820px) {
  .row_li {
    margin-bottom: 10px !important;
  }
  .iframePage .left {
    padding-top: 20px !important;
  }
  .iframePage .left .row .title {
    margin-bottom: 10px !important;
  }
}
@media screen and (max-width: 750px) {
  .iframePage {
    padding-top: 0.54rem;
    overflow-y: overlay;
    .bannerBox {
      display: none;
    }
    .container {
      padding: 0.15rem;
    }

    .left {
      display: none;
    }
    .flexBox {
      padding-left: 0;
      width: 100%;
    }
    .main_bg {
      top: 0.54rem;
      width: 100%;
    }
  }
}
</style>